<template>
  <el-container id="main">
    <!-- 侧栏菜单开始 -->
    <el-aside width="200px" id="aside">
      <el-menu
        id="sidebar"
        :default-active="sidebar_active"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#393d49"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="menu0000">
          <el-avatar
            shape="circle"
            size="small"
            :src="require('@/assets/logo.png')"
            style="background: white"
          ></el-avatar>
          <span style="font-size: 20px; margin: 0 10px">MediCare Hub</span>
        </el-menu-item>
        <TreeMenu :menuArr="userMenu" :switchView="switchView"></TreeMenu>
      </el-menu>
    </el-aside>
    <!-- 侧栏菜单结束 -->
    <el-container>
      <!-- 头部菜单开始 -->
      <el-header id="header">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#23262e"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item @click="toLargeScreen">数据大屏</el-menu-item>
          <el-menu-item @click="toApp">下载客户端</el-menu-item>
          <el-submenu id="headSelf" index="4">
            <template slot="title">
              <el-avatar
                shape="square"
                :size="38"
                :src="baseURL + user.avatar"
              ></el-avatar>
              <span style="margin-left: 12px">{{ user.name }}</span>
            </template>
            <el-menu-item index="4-1" @click="exitAccount"
              >退出登录</el-menu-item
            >
            <el-menu-item index="4-2" @click="updatePwdOpen"
              >修改密码</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-header>
      <!-- 头部菜单结束 -->
      <!-- 主要显示区域开始 -->
      <el-main>
        <component
          :is="currentView"
          :params="params"
          :switchView="switchView"
        ></component>
      </el-main>
      <!-- 主要显示区域结束 -->
      <!-- 底部开始 -->
      <el-footer id="footer">
        <el-card> madeBy peng_YuJun </el-card>
      </el-footer>
      <!-- 底部结束 -->
    </el-container>
    <!-- 改密弹窗开始 -->
    <el-dialog
      title="修改密码"
      :visible.sync="updatePwdDialogVisible"
      width="30%"
      :before-close="updatePwdClose"
      v-loading="loading"
    >
      <el-form
        ref="updatePwdForm"
        :rules="rules"
        :model="row"
        label-width="80px"
      >
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model="row.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="row.newPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="row.confirmPwd"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePwdClose">取 消</el-button>
        <el-button type="primary" @click="updatePwdConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 增加弹窗结束 -->
  </el-container>
</template>

<script>
import { isStrEmpty } from "@/utils/util";
import { baseURL } from "@/api/request";
import TreeMenu from "@/components/TmplTreeMenu.vue";
// 管理角色权限页面
import ManageUser from "@/components/ManageUser.vue";
import ManageRule from "@/components/ManageRule.vue";
import ManageApp from "@/components/ManageApp.vue";
import ManageMenu from "@/components/ManageMenu.vue";
import BusWriteEssay from "@/components/BusWriteEssay.vue";
import ManageEssay from "@/components/ManageEssay.vue";
import ManageEssayType from "@/components/ManageEssayType.vue";
import ManageEnt from "@/components/ManageEnt.vue";
import ManageMedi from "@/components/ManageMedi.vue";
import ManageDisease from "@/components/ManageDisease.vue";
import ManageDr from "@/components/ManageDr.vue";
import ManageDrSelf from "@/components/ManageDrSelf.vue";
import Home from "@/components/Home.vue";
export default {
  components: {
    TreeMenu,
    ManageUser,
    ManageRule,
    ManageApp,
    ManageMenu,
    BusWriteEssay,
    ManageEssay,
    ManageEssayType,
    ManageEnt,
    ManageMedi,
    ManageDisease,
    ManageDr,
    ManageDrSelf,
    Home
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.row.confirmPwd !== "") {
          this.$refs.updatePwdForm.validateField("confirmPwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.row.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user: {},
      userMenu: [],
      currentView: "", //当前主组件
      params: null, //父组件向子组件传递的参数
      sidebar_active: "",
      baseURL: baseURL,
      // 弹窗参数
      row: {},
      updatePwdDialogVisible: false,
      loading: false,
      rules: {
        newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        confirmPwd: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getMenu() {
      this.request
        .get("/ruleMenu/getUserMenu", {
          params: {
            ruleCode: this.user.ruleCode,
            parent: -1,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.userMenu = res.data;
            this.findCurrentPage(res.data);
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    exitAccount() {
      this.request.post("/access/logOut");
      localStorage.removeItem("loginUser");
      this.$router.replace("/login");
    },
    updatePwdOpen() {
      this.row = {};
      this.updatePwdDialogVisible = true;
    },
    updatePwdClose() {
      this.$refs["updatePwdForm"].resetFields();
      this.row = {};
      this.updatePwdDialogVisible = false;
    },
    updatePwdConfirm() {
      this.request
        .post("/access/resetUserPwd", {
          oldPwd: this.row.oldPwd,
          newPwd: this.row.newPwd,
          id: this.user.id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.updatePwdClose();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toApp() {
      //this.$router.push('/multipleApp')
      const routerUrl = this.$router.resolve({
        path: "/busAppDownload",
        //query:{'传参':''},
      });
      window.open(routerUrl.href, "_blank");
    },
    toLargeScreen(){
      //this.$router.push('/multipleApp')
      const routerUrl = this.$router.resolve({
        path: "/busLargeScreen",
        //query:{'传参':''},
      });
      window.open(routerUrl.href, "_blank");
    },
    findCurrentPage(menus) {
      const that = this;
      menus.forEach(function (item) {
        if (item.preset == 1) {
          that.switchView(item.url, item.code, null);
        }
        if (item.children != null && item.children.length > 0) {
          that.findCurrentPage(item.children);
        }
      });
    },
    switchView(viewRoute, sideIndex, params) {
      if (!isStrEmpty(viewRoute) && viewRoute != "#")
        this.currentView = viewRoute;
      this.params = params;
      this.sidebar_active = sideIndex;
    },
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("loginUser"));
    this.getMenu();
  },
};
</script>

<style>
#main {
  width: 100%;
  height: 100vh;
}
#header {
  padding: 0;
}
#headSelf {
  position: absolute;
  right: 50px;
}
#sidebar {
  height: 100%;
  border: none;
}
#footer {
  padding: 0;
}
</style>